<template>
  <list-frame :show-index="true" :show-selection="true" :show-advance-query="true" :total="queryForm.total"
    :table-data="shippingList" :columns="columns" @page-changed="onPageChanged" @size-changed="onSizeChanged"
    @query="onQuery" @row-selected="onRowSelected">
    <template #base>
      <!-- <el-input v-model="queryForm.orderNumber" placeholder="检索订单编号" style="width: 160px;"></el-input> -->
      <el-input clearable v-model="queryForm.poNumber" placeholder="PO订单号"
        style="width: 200px;margin-left: 8px;"></el-input>
      <el-input clearable v-model="queryForm.sn" placeholder="SN" style="width: 200px;margin-left: 8px;"></el-input>
      <el-input clearable v-model="queryForm.logisticsNumber" placeholder="快递单号"
        style="width: 200px;margin-left: 8px;"></el-input>
      <el-input clearable v-model="queryForm.telephone" placeholder="联系人电话"
        style="width: 200px;margin-left: 8px;"></el-input>
      <!-- <el-select clearable v-model="queryForm.materialCode" placeholder="选择物料" style="width: 160px;margin-left: 8px;">
        <el-option v-for="item in materialList" :key="item.code" :label="item.name" :value="item.code"></el-option>
      </el-select> -->
    </template>
    <template #advance>
      <el-form inline :label-width="80">
        <el-form-item class="form-item" label="订单编号">
          <el-input v-model="queryForm.orderNumber"></el-input>
        </el-form-item>
        <el-form-item class="form-item" label="PO订单号">
          <el-input v-model="queryForm.poNumber"></el-input>
        </el-form-item>
        <el-form-item class="form-item" label="联系人">
          <el-input v-model="queryForm.contactor"></el-input>
        </el-form-item>
        <el-form-item class="form-item" label="联系电话">
          <el-input v-model="queryForm.telephone"></el-input>
        </el-form-item>
        <el-form-item class="form-item-line" label="收货地址">
          <el-input v-model="queryForm.address"></el-input>
        </el-form-item>
        <el-form-item class="form-item" label="快递单号">
          <el-input v-model="queryForm.logisticsNumber"></el-input>
        </el-form-item>
        <el-form-item class="form-item" label="SN">
          <el-input v-model="queryForm.sn"></el-input>
        </el-form-item>
        <el-form-item class="form-item" label="物料名称">
          <el-select clearable v-model="queryForm.materialCode">
            <el-option v-for="item in materialList" :key="item.code" :label="item.name" :value="item.code"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="form-item" label="采购主体">
          <el-select clearable v-model="queryForm.purchaseCompanyCode">
            <el-option v-for="item in purchaseCompanyList" :key="item.code" :label="item.name"
              :value="item.code"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="form-item-line" label="发货日期">
          <zw-date-range-picker seperator="-" v-model="shippingDate"></zw-date-range-picker>
        </el-form-item>
        <el-form-item class="form-item-line" label="订单日期">
          <zw-date-range-picker seperator="-" v-model="createDate"></zw-date-range-picker>
        </el-form-item>
      </el-form>
    </template>
    <template #append>
      <el-button type="primary" size="small" @click="reload" :icon="Refresh" title="重置"></el-button>
      <el-button type="primary" size="small" :icon="CirclePlusFilled" color="#626aef" @click="onCreate"></el-button>
      <el-button type="primary" size="small" color="#219b97" :icon="UploadFilled" @click="onImportShow"></el-button>
      <el-button type="primary" size="small" color="#219b97" :icon="Bottom" @click="onExport"></el-button>
      <zw-importer action="/api/shipping/import" :visible="importVisible" @close="importVisible = false"
        @import="onImport"></zw-importer>
      <zw-file-downloader :visible="downloaderVisible" :file-ids="fileIds"
        @downloaded="onDownloaded"></zw-file-downloader>
    </template>
    <template #operations="row">
      <el-button link type="primary" size="default" @click="onDetail(row)">详情</el-button>
    </template>
  </list-frame>
</template>
<script lang="ts" setup>
import type { ColumnType } from '@/components/types';
import ListFrame from '@/components/ListFrame/ListFrame.vue';
import ZwImporter from '@/components/Form/ZwImporter.vue';
import ZwFileDownloader from '@/components/Form/ZwFileDownloader.vue';
import ApiTree from '@/server/api-tree';
import { onMounted, ref, watch } from 'vue';
import type { PageShippingDTO, QueryShippingVO } from '@/server/shipping/types';
import { DictTypeEnum, type DictVO } from '@/server/dict/types';
import ZwDateRangePicker from '@/components/Form/ZwDateRangePicker.vue';
import emits, { EventEnum } from '@/plugins/emits';
import { ElMessage } from 'element-plus';
import WinUtil, { WinNameRecord } from '@/plugins/window';
import { UploadFilled, Bottom, CirclePlusFilled, Refresh } from "@element-plus/icons-vue"
/** 表格属性 */
const columns = ref<ColumnType[]>([
  { prop: "orderNumber", colName: "订单号", width: 160 },
  { prop: "poNumber", colName: "PO订单号", width: 200 },
  { prop: "purchaseCompany", colName: "采购主体", width: 200 },
  { prop: "materialCount", colName: "物料总数", width: 80 },
  { prop: "shippingDate", colName: "出货日期", width: 100 },
  { prop: "contactor", colName: "联系人", width: 120 },
  { prop: "telephone", colName: "电话", width: 120 },
  { prop: "cuser", colName: "创建人", width: 80 },
  { prop: "ctime", colName: "创建时间", width: 240 },
]);

/** 查询发货订单列表 */
const queryForm = ref<QueryShippingVO>({
  orderNumber: "",
  poNumber: "",
  contactor: "",
  telephone: "",
  address: "",
  logisticsNumber: "",
  sn: "",
  materialCode: "",
  purchaseCompanyCode: "",
  shippingDateStart: "",
  shippingDateEnd: "",
  createTimeStart: "",
  createTimeEnd: "",
  pageNo: 1,
  pageSize: 30,
  total: 0
});
// 用来处理日期的参数
const shippingDate = ref<string[]>([]);
watch(() => shippingDate.value, () => {
  if (shippingDate.value.length === 2) {
    queryForm.value.shippingDateStart = shippingDate.value[0];
    queryForm.value.shippingDateEnd = shippingDate.value[1]
  } else {
    queryForm.value.shippingDateStart = "";
    queryForm.value.shippingDateEnd = ""
  }
})
const createDate = ref<string[]>([]);
watch(() => createDate.value, () => {
  if (createDate.value.length === 2) {
    queryForm.value.createTimeStart = createDate.value[0];
    queryForm.value.createTimeEnd = createDate.value[1]
  } else {
    queryForm.value.createTimeStart = "";
    queryForm.value.createTimeEnd = ""
  }
})
const initForm = () => {
  queryForm.value = {
    orderNumber: "",
    poNumber: "",
    contactor: "",
    telephone: "",
    address: "",
    logisticsNumber: "",
    sn: "",
    materialCode: "",
    purchaseCompanyCode: "",
    shippingDateStart: "",
    shippingDateEnd: "",
    createTimeStart: "",
    createTimeEnd: "",
    pageNo: 1,
    pageSize: queryForm.value.pageSize,
    total: 0
  }
}
const shippingList = ref<PageShippingDTO[]>([])
const reload = () => {
  initForm();
  getShippingList();
}
const getShippingList = async () => {
  const { success, data, totalCount } = await ApiTree.shipping.page(queryForm.value);
  if (success) {
    shippingList.value = data.map(x => {
      x.shippingDate = x.shippingDate.replace(" 00:00:00", "")
      return x;
    });
    queryForm.value.total = totalCount;
  }
}

const onPageChanged = (pageNo: number) => {
  queryForm.value.pageNo = pageNo;
  getShippingList();
}
const onSizeChanged = (pageSize: number) => {
  queryForm.value.pageSize = pageSize;
  getShippingList();
}
const onQuery = () => {
  queryForm.value.pageNo = 1;
  getShippingList();
}
/** 获取物料字典 */
const materialList = ref<DictVO[]>([])
const getMaterialList = async () => {
  const { success, data } = await ApiTree.dict.list(DictTypeEnum.MATERIAL, true);
  if (success) {
    materialList.value = data;
  }
}
/** 获取采购主体 */
const purchaseCompanyList = ref<DictVO[]>([])
const getPurchaseCompanyList = async () => {
  const { success, data } = await ApiTree.dict.list(DictTypeEnum.PURCHASE_COMPANY, true);
  if (success) {
    purchaseCompanyList.value = data;
  }
}
const onCreate = () => {
  WinUtil.open("/shipping/create", WinNameRecord.SHIPPING_CREATE);
}
const onDetail = (row: { value: PageShippingDTO }) => {
  WinUtil.open("/shipping/detail?guid=" + row.value.guid, WinNameRecord.SHIPPING_DETAIL, row.value.guid);
}
/** 导入数据 */
const importVisible = ref(false);
const onImportShow = () => {
  importVisible.value = true;
}
const onImport = async (fileId: string[], callback: () => void) => {
  const { success, msg } = await ApiTree.shipping.importData(fileId[0]);
  if (success) {
    ElMessage.success(msg);
    reload();
  } else {
    ElMessage.error(msg)
  }
  importVisible.value = false;
  callback();
}
/** 导出数据 */
const selectedRows = ref<PageShippingDTO[]>([])
const onRowSelected = (value: PageShippingDTO[]) => {
  selectedRows.value = value;
}
const onExport = async () => {
  const { success, data } = await ApiTree.shipping.export(queryForm.value, selectedRows.value.map(x => x.guid))
  if (success) {
    fileIds.value = [data];
    downloaderVisible.value = true;
  }
}
const downloaderVisible = ref(false);
const fileIds = ref<string[]>([])
const onDownloaded = () => {
  downloaderVisible.value = false;
  fileIds.value = [];
}
onMounted(() => {
  getMaterialList();
  getPurchaseCompanyList();
  reload();
  emits.on(EventEnum.TABLE_RELOAD, reload);
})
</script>
<style lang="scss" scope></style>
